<template>
  <div class="total-order-amount">
    <FirstCommonComp title="累计订单额" :value="Number(reportData.orderToday)">
      <template #default>
        <v-chart :option="option"></v-chart>
      </template>
      <template #footer>
        <div>
          <span>昨日销售额</span>
          <span class="sales">￥{{ reportData.orderLastDay }}</span>
        </div>
      </template>
    </FirstCommonComp>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import FirstCommonComp from './FirstCommonComp.vue'

const props = defineProps({
  reportData: {
    type: Object,
    required: true,
  },
})
const option = ref({
  xAxis: {
    type: 'category',
    boundaryGap: false,
    show: false,
  },
  yAxis: {
    type: 'value',
    show: false,
  },
  grid: {
    top: 0,
    bottom: 0,
    left: 0,
    right: 0,
  },
  series: [
    {
      type: 'line',
      data: [],
      areaStyle: { color: 'purple' },
      smooth: true,
      lineStyle: { opacity: 0 },
      itemStyle: { opacity: 0 },
    },
  ],
})

watch(() => props.reportData,(newData) => {
    option.value.series[0].data = newData.orderTrend
})
</script>

<style scoped></style>
